<template>
  <div class="container">
    <el-card>
      <!-- 用一个行列布局 -->
      <el-row type="flex" justify="space-between" align="center" style="height: 50px">
        <el-col :span="20">
          <span style="padding:0 15px;font-weight:700;color:#606266">关键字</span>
          <el-input
            v-model="params.keyword"
            class="input-box"
          ></el-input>
          <span style="padding:0 15px;font-weight:700;color:#606266">状态</span>
          <el-select placeholder="请选择" v-model="params.state" >
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
          <el-button size="small" @click="clear" style="margin-left:10px">清除</el-button>
          <el-button size="small" type="primary" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
              <el-button icon="el-icon-edit" size="small" type="success" @click="showAddDialog">新增技巧</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-alert
        :title="'数据一共'+total+'条'"
        type="info"
        show-icon
        :closable="false" >
      </el-alert><br>
      <el-table :data="articleList" style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
        >
        </el-table-column>
        <el-table-column prop="title" label="文章标题" width='300'>
          <template #default="{row}">
            {{ row.title }}<i v-if="row.videoURL" class="el-icon-film" @click="showVideo(row.videoURL)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width='200'>
           <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width='100'>
          <template #default='{row}'>
            {{row.state?'已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="scope">
            <el-link type="primary" :underline="false" @click='review(scope.row)'>
              预览
            </el-link>
            <el-link type="primary" :underline="false" @click="stop(scope.row)">
              {{scope.row.state?'禁用':'启用'}}
            </el-link>
            <el-link :disabled="Boolean(scope.row.state)" type="primary" :underline="false" @click="edit(scope.row)">
              修改
            </el-link>
            <el-link :disabled="Boolean(scope.row.state)" type="primary" :underline="false" @click="del(scope.row)">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table><br>
      <div class="pageContainer">
        <el-pagination
          background
          layout="->,prev, pager, next, sizes, jumper"
          :total="total"
          :current-page="params.page"
          :page-size="params.pagesize"
          :page-sizes="[5, 10, 15, 20]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog class="previewDialog" :visible="videoVisible" fullscreen @close="closeVideoModal">
      <i class="el-icon-close" @click="closeVideoModal"></i>
      <video
          ref="video"
          class="play-video"
          controls="controls"
          autoplay="autoplay"
      >
        <source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/52e63a10-aecd-11ea-b43d-2358b31b6ce6.mp4" type="video/mp4" />
      </video>
    </el-dialog>
    <articles-add v-model='detail' :addDialogVisible='addDialogVisible' @closeDialog='closeDialog'></articles-add>
    <articles-preview :reviewData="reviewData" :previewDialogVisible="previewDialogVisible" @closePreviewDialog="closePreviewDialog"></articles-preview>
  </div>
</template>

<script>
import ArticlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
import dayjs from 'dayjs'
import { list, remove, detail, changeState } from '@/api/hmmm/articles.js'
export default {
  components: {
    ArticlesAdd, ArticlesPreview
  },
  data () {
    return {
      articleList: [],
      params: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      total: 0,
      addDialogVisible: false,
      previewDialogVisible: false,
      videoVisible: false,
      detail: {},
      reviewData: {},
      videoURL: ''
    }
  },
  mounted () {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      const { data: res } = await list(this.params)
      this.articleList = res.items
      // console.log(this.articleList)
      this.total = res.counts
    },
    showAddDialog () {
      // 打开对话框
      this.addDialogVisible = true
    },
    handleCurrentChange (page) {
      this.params.page = page
      // 重新渲染页面
      this.getArticleList()
    },
    handleSizeChange (pagesize) {
      this.params.page = 1
      this.params.pagesize = pagesize
      // 重新渲染页面
      this.getArticleList()
    },
    // 序号自增
    indexMethod (index) {
      return index + 1 + (this.params.page - 1) * this.params.pagesize
    },
    // 格式化日期
    formatDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 预览
    review (data) {
      this.reviewData = data
      this.previewDialogVisible = true
    },
    // 禁用
    async stop (data) {
      data.state = data.state ? 0 : 1
      await changeState(data)
    },
    // 编辑前的回显，把数据传给子组件
    async edit (data) {
      // 调接口，进行数据回显
      const { data: res } = await detail(data)
      this.detail = res
      this.addDialogVisible = true
    },
    del (data) {
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.$message.success('删除成功!')
        // 如果当前页只有1条数据，_page需要-1
        if (this.articleList.length === 1) {
          this.params.page--
        }
        // 重新渲染
        this.getArticleList()
        // 隐藏对话框
        // this.dialogFormVisible = false
      })
    },
    closeDialog () {
      this.addDialogVisible = false
      this.detail = {}
    },
    async search () {
      const { data: res } = await list(this.params)
      this.articleList = res.items
      this.total = res.counts
    },
    // 清除
    clear () {
      this.params = {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      }
      // 重新渲染页面
      this.getArticleList()
    },
    // 关闭预览对话框
    closePreviewDialog () {
      this.previewDialogVisible = false
    },
    // 播放视频
    showVideo (videoURL) {
      this.videoURL = videoURL
      this.videoVisible = true
    },
    // 关闭模态播放框
    closeVideoModal () {
      this.videoVisible = false
      // v暂停视频
      this.$refs.video.pause()
      this.$refs.video.currentTime = 0
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 14px;
  color:#606266
}

.input-box{
  width: 200px;
  margin-right: 15px;
}
.el-link{
  padding:0 5px
}
::v-deep .el-icon-film{
  font-size:18px;
  color:#1857d6;
  margin-left: 5px;
}
.play-video {
    object-fit: contain;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    width: 60%;
}
.previewDialog::v-deep .el-dialog{
    background-color:rgba(0, 0, 0, 0.065) !important
  }
.previewDialog::v-deep .el-dialog__header{
  display:none
}

.el-icon-close{
  position: absolute;
  left:50%;
  top:30px;
  transform: translate(-50%,0);
  width: 50px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  color: white;
  text-align:center;
  background-color: rgba(0, 0, 0, 0.223);
  box-shadow: 0 0 10px 6px #60626633 inset;
  // box-shadow: ;
  border-radius: 50%;
  z-index:10000
}
</style>
